<template>
  <view class="filter-wrapper">
    <!-- 筛选标题栏 -->
    <view class="filter-tabs" v-if="isPanel">
      <view class="filter-tab" v-for="(item, key) in filterConfigs" :key="key" @click="handleTabClick(key)">
        <text class="fs-30 mr-12" :style="{ color: isOpen && currentType === key ? '#286FFF' : '' }">{{ item.title
        }}</text>
        <block>
          <image v-if="isOpen && currentType === key" class="w-20 h-12" src="/static/svg/arrow-down-active.svg"></image>
          <image v-else class="w-20 h-12" src="/static/svg/arrow-down.svg"></image>
        </block>
      </view>
    </view>

    <!-- 遮罩层和下拉内容 -->
    <view v-if="isOpen" class="filter-mask" @click="closeDropdown">
      <view class="filter-dropdown" @click.stop>
        <!-- 样式一：垂直列表 -->
        <template v-if="currentStyle === 'vertical'">
          <view v-for="(item, index) in currentOptions" :key="index" class="filter-item vertical"
            :class="{ active: isSelected(item.id) }" @click="handleSelect(item.id)">
            <text>{{ item.title }}</text>
            <image class="w-32 h-24" src="/static/svg/check.svg" v-if="isSelected(item.id)"></image>
          </view>
        </template>

        <!-- 样式二：网格布局 -->
        <template v-else>
          <view class="grid-container">
            <view v-for="(item, index) in currentOptions" :key="index" class="filter-item grid"
              :class="{ active: isSelected(item.id) }" @click="handleSelect(item.id)">
              {{ item.title }}
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "Filter",
  props: {
    // 筛选配置
    filterConfigs: {
      type: Object,
      default: () => ({}),
    },
    // 选中的值
    selectedValues: {
      type: Object,
      default: () => ({}),
    },
    // 是否作为面板使用
    isPanel: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    // 在 data 中初始化默认选中值，使用空字符串代替 'all'
    const defaults = {};
    Object.keys(this.filterConfigs).forEach(key => {
      defaults[key] = '';
    });

    return {
      isOpen: false,
      currentType: Object.keys(this.filterConfigs)[0] || "",
      defaultValues: defaults
    };
  },

  computed: {
    currentOptions() {
      // 在选项列表前添加"不限"选项，id 使用空字符串
      const defaultOption = { id: '', title: '不限' };
      const options = this.filterConfigs[this.currentType]?.options || [];
      return [defaultOption, ...options];
    },

    // 合并默认值和传入的选中值
    mergedSelectedValues() {
      return { ...this.defaultValues, ...this.selectedValues };
    },

    currentStyle() {
      return this.filterConfigs[this.currentType]?.style || "vertical";
    },
  },

  methods: {
    handleTabClick(type) {
      if (this.currentType === type) {
        this.isOpen = !this.isOpen;
      } else {
        this.currentType = type;
        this.isOpen = true;
      }
    },

    closeDropdown() {
      this.isOpen = false;
    },

    isSelected(value) {
      // 使用合并后的选中值，空字符串表示选中"不限"
      const currentValue = this.mergedSelectedValues[this.currentType];
      return currentValue === value || (!currentValue && value === '');
    },

    handleSelect(value) {
      this.$emit("change", {
        type: this.currentType,
        value: value,
      });
      this.isOpen = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-wrapper {
  width: 100%;
  position: relative;
}

.filter-tabs {
  display: flex;
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 102;
}

.filter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;

  .arrow {
    font-size: 12px;
    margin-left: 4px;
    transition: transform 0.3s;
    color: #999;

    &.arrow-up {
      transform: rotate(180deg);
    }
  }
}

.filter-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 101;
}

.filter-dropdown {
  position: fixed;
  top: 172rpx;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 102;
  max-height: 60vh;
  overflow-y: auto;
}

.filter-item {
  padding: 30rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &.vertical {
    border-bottom: 1px solid #eee;

    &:last-child {
      border-bottom: none;
    }

    &.active {
      color: #286FFF; // 垂直列表模式下只改变文字颜色
      background: none; // 移除背景色
    }
  }

  &.grid {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    min-width: 148rpx;
    padding: 0 26rpx;
    height: 68rpx;
    margin: 10rpx;
    background: #f7f8fa;
    font-size: 26rpx;
    color: #677585;

    &.active {
      color: #286FFF; // 网格模式下改变文字颜色
      background: #F0F7FF; // 网格模式下显示背景色
    }
  }
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 32rpx;

  .filter-item {}
}
</style>
